<template>
  <div id="app">
    <!-- loader start -->
    <!-- <div class="loader">
        <div class="spinner">
          <img :src='`${this.rootUrl}img/assets/loader.gif`' alt="loader" />
        </div>
    </div> -->
    <!-- loader end -->
    <!-- Bottom To Top -->
    <div class="ks-top-icon">
      <a id="button" class="show">
        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="18" viewBox="0 0 23 18">
          <path
            d="M13.825,18.000 C10.772,18.000 7.928,16.517 6.217,14.033 C5.870,13.530 6.006,12.845 6.519,12.505 C7.032,12.165 7.729,12.297 8.076,12.801 C9.369,14.678 11.518,15.799 13.825,15.799 C17.647,15.799 20.757,12.749 20.757,9.000 C20.757,5.251 17.647,2.200 13.825,2.200 C11.512,2.200 9.359,3.326 8.067,5.212 C7.721,5.717 7.024,5.851 6.510,5.512 C5.996,5.173 5.859,4.489 6.205,3.985 C7.915,1.490 10.763,-0.000 13.825,-0.000 C18.884,-0.000 23.000,4.037 23.000,9.000 C23.000,13.963 18.884,18.000 13.825,18.000 ZM11.293,6.704 C10.902,6.313 10.902,5.679 11.293,5.287 C11.683,4.896 12.316,4.896 12.707,5.287 L15.706,8.291 C15.730,8.315 15.752,8.339 15.772,8.365 C15.777,8.371 15.782,8.377 15.787,8.384 C15.802,8.403 15.817,8.423 15.831,8.443 C15.835,8.449 15.838,8.455 15.842,8.462 C15.856,8.483 15.869,8.505 15.881,8.527 C15.883,8.532 15.886,8.537 15.888,8.541 C15.901,8.566 15.913,8.590 15.923,8.616 C15.925,8.619 15.925,8.622 15.927,8.626 C15.938,8.653 15.948,8.680 15.956,8.708 C15.957,8.712 15.958,8.715 15.959,8.719 C15.967,8.747 15.974,8.774 15.980,8.803 C15.982,8.812 15.982,8.820 15.984,8.829 C15.988,8.852 15.992,8.876 15.995,8.900 C15.998,8.933 16.000,8.966 16.000,9.000 C16.000,9.033 15.998,9.067 15.995,9.100 C15.992,9.124 15.988,9.148 15.984,9.172 C15.982,9.180 15.982,9.189 15.980,9.197 C15.974,9.226 15.967,9.254 15.959,9.282 C15.958,9.285 15.957,9.288 15.956,9.292 C15.948,9.320 15.938,9.348 15.927,9.375 C15.925,9.378 15.925,9.381 15.923,9.384 C15.913,9.410 15.901,9.435 15.888,9.459 C15.886,9.464 15.883,9.468 15.881,9.473 C15.869,9.495 15.856,9.517 15.842,9.539 C15.838,9.545 15.835,9.551 15.831,9.557 C15.817,9.577 15.802,9.597 15.787,9.616 C15.782,9.623 15.777,9.629 15.772,9.636 C15.752,9.661 15.730,9.685 15.707,9.708 L12.707,12.712 C12.511,12.908 12.256,13.006 12.000,13.006 C11.744,13.006 11.488,12.908 11.293,12.712 C10.902,12.321 10.902,11.688 11.293,11.296 L12.586,10.001 L1.000,10.001 C0.448,10.001 -0.000,9.553 -0.000,9.000 C-0.000,8.447 0.448,7.998 1.000,7.998 L12.586,7.998 L11.293,6.704 Z">
          </path>
        </svg>
      </a>
    </div>
    <!-- Bottom To Top -->
    <!-- header section start -->
    <div class="ks-header-wrappe ks-postion">
      <div class="container">
        <div class="ks-header-parent">
          <div class="ks-header-inner">
            <div class="ks-brand-logo">
              <a href="index.html"><img :src="`${this.rootUrl}img/assets/logo.png`" alt="" /></a>
              <div class="ks-toggle-btn" :style="{
                display: screenWidth <= 1200 ? 'block !important' : '',
              }" @click="toggle_menu">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="ks-navbar-menu">
              <ul class="menu">
                <li class="responsive-logo">
                  <a href="javascript:;"><img :src="`${this.rootUrl}img/assets/logo.png`" alt="" /></a>
                </li>
                <li><router-link to="/home">Home</router-link></li>
                <li><router-link to="/game">Game</router-link></li>
                <li class="active"><router-link to="/login">Login</router-link></li>
                <li><router-link to="/sigin">Sign In</router-link></li>
                <li><router-link to="/feedback">Feedback</router-link></li>
                <li><router-link to="/profiles">Profiles</router-link></li>
                <li><router-link to="/purchases">Purchases</router-link></li>
                <li><router-link to="/adminDashborad">Admin Dashborad</router-link></li>
                <li><router-link to="/userDashborad">User Dashboard</router-link></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单区域 -->
    <div class="profile-container">
      <div class="profile-wrapper">
        <!-- 左边表单 -->
        <div class="profile-form">
          <el-form :model="profileForm" label-position="top">
            <el-form-item label="">
              <el-input v-model="profileForm.email" placeholder="enter you email"
                prefix-icon="el-icon-message"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-input v-model="profileForm.password" placeholder="enter you password"
                prefix-icon="el-icon-user"></el-input>
            </el-form-item>


          </el-form>
          <!-- 提交按钮 -->
          <div style="display: flex;justify-content: center;">
            <button class="ks-btn-sub" @click="submitProfile">
              Login
            </button>
          </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      screenWidth: null,
      menuActive: false,
      profileForm: {
        email: '',
        password: '',
        profile: ''
      },
      imageUrl: ''
    }
  },
  watch: {
    screenWidth: {
      handler(val) {
        if (val < 900) {
          console.log(val + " 屏幕宽度小于900px");
        } else {
          console.log(val + " 屏幕宽度大于900px");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth;
    };
    console.log("123132123", this.screenWidth);
  },
  methods: {
    toggle_menu() {
      document.body.classList.toggle("menu-open");
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    submitProfile() {
      console.log('提交的profile数据:', this.profileForm);
      this.$message.success('个人信息已保存');
    }
  }
};
</script>

<style lang="scss" scoped>
/* 重要：引入必要的样式文件 */
@import "/cdn/bootstrap/bootstrap.min.css";
@import '/cdn/element-ui/2.15.5/theme-chalk/index.css';
@import '/font/css/font.css';
@import "/font/css/font-awesome.min.css";
@import "/font/css/style.css";
@import "/font/css/responsive.css";




.ks-banner-btn {
  display: flex;
  align-items: center;
}

.ks-btn {
  position: relative;
  max-width: 190px;
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "Inter";
  font-weight: 600;
  text-transform: capitalize;
  font-size: 16px;
  color: #00c3c9;
  background-color: #ffffff;
  border-radius: 40px;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.ks-btn:hover {
  background-color: #e57d20;
  color: #ffffff;
}

.ks-btn-sub {
  margin: 1px 0 0 0;
  width: 108px !important;
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  background: #00c3c9 !important;
  color: #fff !important;
  height: 42px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.profile-wrapper {
  display: flex;
  gap: 40px;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-form {
  flex: 1;

  .el-form-item {
    margin-bottom: 24px;
  }

  .el-input,
  .el-textarea {
    width: 100%;
  }
}

.avatar-upload {
  width: 300px;
  text-align: center;

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;

    &:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
    }

    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .upload-tip {
    color: #000000;
    margin-top: 10px;
  }
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
  padding: 12px 0;
}

::v-deep .el-form-item__label {
  font-size: 22px;
  color: #000;
  font-weight: 600;
}

.price-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.original-price {
  text-decoration: line-through;
  color: #666;
}

.discounted-price {
  font-weight: bold;
  color: #28a745;
}

.pay-icon img {
  width: 100px;
  height: 30px;
  margin-left: 10px;
}

.card {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

button {
  width: 200px;
  padding: 15px;
  font-size: 16px;
  margin-top: 30px;
  /* 按钮与上一行间距放大一倍 */
  overflow: hidden;
}

.pay-icon {
  text-align: center;
  margin-top: 20px;
}

.button-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>